<template>
  <div>
    <a-descriptions bordered :column="2" v-if="errorData">
      <a-descriptions-item :label="t('component.error.errorCode')">
        {{ errorData.code }}
      </a-descriptions-item>
      <a-descriptions-item :label="t('component.error.errorTime')">
        {{ d(errorData.ts, 'long') }}
      </a-descriptions-item>

      <a-descriptions-item v-if="errorData.msg" :label="t('component.error.errorInfo')" :span="2">
        {{ errorData.msg }}
      </a-descriptions-item>
      <a-descriptions-item v-if="errorData.data" :label="t('component.error.errorCause')" :span="2">
        {{ errorData.data }}
      </a-descriptions-item>
      <a-descriptions-item v-if="errorData.causeMessage" :label="t('component.error.errorStack')" :span="2">
        <pre class="language-javastacktrace server-error-stack">
            <code class="language-javastacktrace" >
             {{errorData.causeMessage}}
            </code>
          </pre>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>
<script lang='ts'>
/**
 *  causeMessage: null
    code: 50000
    data: "演示环境不允许删除"
    msg: "系统异常,请联系管理员"
    success: true
    ts: 1622107112952
 */
import { defineComponent, onMounted } from 'vue'
import { t, d } from '/@/i18n/index'
import { Descriptions } from 'ant-design-vue'
import prismjs from '/@/assets/js/prism.js'
import '/@/assets/css/prism.css'
export default defineComponent({
  name: 'ServerError',
  props: {
    errorData: Object,
  },
  components: {
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
  },
  setup(props) {
    onMounted(() => {
      prismjs.highlightAll()
    })
    return {
      t,
      d,
      errorData: props.errorData,
    }
  },
})
</script>

<style lang="less" scoped>
.server-error-stack {
  height: 248px;
  width: 100%;
}

::v-deep(.ant-descriptions-bordered .ant-descriptions-item-label) {
  min-width: 120px;
}
</style>